import { createElement, TdHTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { tableCellDefaultProps } from './defaultProps';
import type { TableCellOptions } from './type';
import numberToWord from '../_util/numberToWord';

export interface TableCellProps extends TableCellOptions, Omit<TdHTMLAttributes<HTMLTableCellElement>, 'color'> {}

const TableCell: FC<TableCellProps> = (props) => {
  const {
    className,
    as,
    color,
    active,
    marked,
    colored,
    disabled,
    singleLine,
    selectable,
    textAlign,
    verticalAlign,
    collapsing,
    wide,
    children,
    forwardedRef,
    ...tableCellProps
  } = props;

  return createElement(
    as!,
    {
      ref: forwardedRef,
      className: classNames(
        color,
        colored,
        { colored },
        marked?.position,
        marked?.color,
        { marked },
        { 'single line': singleLine, active, disabled, selectable },
        textAlign,
        { aligned: textAlign },
        verticalAlign,
        { aligned: verticalAlign, collapsing },
        numberToWord(wide),
        { wide },
        className,
      ),
      ...tableCellProps,
    },
    children,
  );
};

TableCell.displayName = 'TableCell';
TableCell.defaultProps = tableCellDefaultProps;

export default TableCell;
